<template>
  <div
    class="container flex flex-col bg-no-repeat bg-contain back-image"
    ref="self"
  >
    <div class="mt-[95px] w-full h-[100px] bg-transparent px-[25px]">
      <div class="text-xl font-bold tracking-[1px]">退关</div>
      <div class="text-sm mt-[3px]">RETREAT</div>
    </div>
    <div class="container h-full bg-transparent px-[10px]">
      <div class="flex-col flex w-full h-full">
        <div class="flex flex-col w-full flex-1">
          <div class="flex h-[210px]">
            <div @click="goToRetreat('/retreat-set')" class="flex flex-1 bg-no-repeat bg-cover bulk-image relative">
              <div class="w-[100px] absolute font-bold" style="top: 30px; left: 25px">
                <div>退关设置</div>
              </div>
            </div>
            <div @click="goToRetreat('/retreat-set-history')" class="flex flex-1 bg-no-repeat bg-cover history-image relative">
              <div class="w-[75px] absolute font-bold" style="top: 30px; left: 25px">
                <div>台账</div>
              </div>
            </div>
          </div>
<!--          <div class="flex h-[210px]">-->
<!--            <div @click="goToTally('/bulk-tally')" class="flex flex-1 bg-no-repeat bg-cover bulk-image relative">-->
<!--              <div class="w-[100px] absolute font-bold" style="top: 30px; left: 25px">-->
<!--                散货外捣-->
<!--              </div>-->
<!--            </div>-->
<!--            <div @click="goToTally('/tally-history')" class="flex flex-1 bg-no-repeat bg-cover history-image relative">-->
<!--              <div class="w-[100px] absolute font-bold" style="top: 30px; left: 25px">-->
<!--                理货历史-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="RetreatViewSelect">
import router from "@/router";
import { ref } from "vue";
function goToRetreat(url: string) {
  router.push(url);
}
</script>
<style scoped>
.back-image {
  background-image: url("../../assets/main-back.png");
}
.ost-image {
  background-image: url("../../assets/ost-back.png");
}
.tst-image {
  background-image: url("../../assets/tst-back.png");
}
.bulk-image {
  background-image: url("../../assets/bulk-back.png");
}
.history-image {
  background-image: url("../../assets/tally-history-back.png");
}

</style>
